<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <!-- Fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
	    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
	    <!-- CSS Libs -->
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-table.min.css" />
	    <!-- CSS App -->
	    <link rel="stylesheet" type="text/css" href="../css/style.css">
	    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	</head>

	<body>
		<div class="container">
			<div>
				<form id="myForm">
					<div class="form-group has-feedback">
						<label for="inputName" class="control-label">Name</label>
						<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary">
						<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
					</div>
					<div class="form-group has-feedback">
						<label for="inputTwitter" class="control-label">Twitter</label>
						<div class="input-group">
							<span class="input-group-addon">@</span>
							<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
						</div>
						<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
						<div class="help-block with-errors"></div>
					</div>
					<div class="form-group">
						<label for="inputEmail" class="control-label">Email</label>
						<input type="email" class="form-control" id="inputEmail" placeholder="Email">
						<div class="help-block with-errors"></div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="control-label">Password</label>
						<div class="form-inline row">
							<div class="form-group col-sm-6">
								<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
								<div class="help-block with-errors"></div>
							</div>
							<div class="form-group col-sm-6">
								<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
								<div class="help-block with-errors"></div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="radio">
							<label>
				        <input type="radio" name="underwear" required>
				        Boxers
				      </label>
						</div>
						<div class="radio">
							<label>
				        <input type="radio" name="underwear" required>
				        Briefs
				      </label>
						</div>
					</div>
					<div class="form-group">
						<div class="checkbox">
							<label>
				        <input type="checkbox" id="terms" data-error="" required>
				        Check yourself
				      </label>
							<div class="help-block with-errors"></div>
						</div>
					</div>
				</form>
					<div class="form-group">
						<button id="submit" type="submit" class="btn btn-primary">Submit</button>
					</div>
			</div>
		</div>
		<script type="text/javascript" src="../lib/js/jquery.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
	
	    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
	    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table-zh-CN.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
	    <script type="text/javascript" src="../lib/js/validator.js"></script>
	    <!-- Javascript -->
	    <script type="text/javascript" src="../js/_app.js"></script>
		<script>
			$(function() {
				$('#myForm').validator();
				$("#submit").click(function(){
					$('#myForm').validator('validate');
					var isValidate = $('#myForm').validator('hasErrors');
					
					console.log(isValidate);
				});
			})
		</script>
	</body>

</html>